<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Lock, User, VideoCameraFilled, Key, Message } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { userApi } from '@/api/user.ts'
import forge  from 'node-forge'
import { useStore } from '@/store/index.ts'
import useFileUpload from '@/composables/useFileUpload.ts'

const isUiModule = ref('login')
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const text = ref<string>('时空旅者：现实与幻想的双重奏')
const currentTextIndex = ref(0)
const router = useRouter()
const fileInput = ref<null | HTMLInputElement>(null)
const isCheck = ref(false)
const svgSrc = ref('')
const isInvoke = ref(false)
const pubKey = ref('') // rsa公钥

const typedText = computed(() =>{
    return text.value.slice(0, currentTextIndex.value)
})

let timeOut:any = null
timeOut = setInterval(() => {
    if (currentTextIndex.value < text.value.length) {
        currentTextIndex.value++
    } else {
        clearInterval(timeOut)
    }
},100)

const loginData = reactive({  // 登录数据
  user: '',
  password: ''
})

const registerForm = reactive({  // 注册数据
  name: '',
  user: '',
  email: '',
  password: '',
  img_url: '',
  confirmPassword: '',
  // characterClass: '',
  captcha: ''
})

const { selectFile, upImg } = useFileUpload(fileInput, registerForm, 0)

const changeData = reactive({  // 修改密码数据
  user: '',
  password: '',
  newPassword: ''
})

const resetData = reactive({  // 重置密码数据
  user: '',
  email: ''
})

const loginRules = reactive<FormRules>({
  user: [
    { required: true, message: '请输入冒险者账号或者邮箱', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/[\u4e00-\u9fa5]/g.test(value)) {
          callback(new Error('冒险者账号或邮箱不能使用中文'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入通行密令', trigger: 'blur' },
    { min: 6, message: '密令长度不能小于6位', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/[\u4e00-\u9fa5]/g.test(value)) {
          callback(new Error('密令不能使用中文'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const registerRules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入冒险者名称', trigger: 'blur' },
    { min: 2, message: '名称长度不能小于2位', trigger: 'blur' }
  ],
  user: [
    { required: true, message: '请输入冒险者账号', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/[\u4e00-\u9fa5]/g.test(value)) {
          callback(new Error('冒险者账号不能使用中文'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入冒险者邮箱', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
          callback()
        } else {
          callback(new Error('邮箱格式错误'))
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请设置通行密令', trigger: 'blur' },
    { min: 6, message: '密令长度不能小于6位', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/[\u4e00-\u9fa5]/g.test(value)) {
          callback(new Error('密令不能使用中文'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认通行密令', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密令不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/[\u4e00-\u9fa5]/g.test(value)) {
          callback(new Error('验证码不能使用中文'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const changeRules = reactive<FormRules>({
  user: [
    { required: true, message: '请输入冒险者账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入原通行密令', trigger: 'blur' },
    { min: 6, message: '密令长度不能小于6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新通行密令', trigger: 'blur' },
    { min: 6, message: '密令长度不能小于6位', trigger: 'blur' }
  ]
})

const resetRules = reactive<FormRules>({
  user: [
    { required: true, message: '请输入冒险者账号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入冒险者邮箱', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
          callback()
        } else {
          callback(new Error('邮箱格式错误'))
        }
      },
      trigger: 'blur'
    }
  ]
})

const store = useStore()

// const characterClasses = [
//   { value: 'warrior', label: '战士', icon: '⚔️', desc: '强大的近战职业，擅长防御与输出' },
//   { value: 'mage', label: '法师', icon: '🔮', desc: '掌握魔法奥秘，远程输出的专家' },
//   { value: 'archer', label: '弓箭手', icon: '🏹', desc: '灵活的远程职业，精通各种射术' },
//   { value: 'healer', label: '牧师', icon: '✨', desc: '治疗与支援的专家，团队的守护者' }
// ]

// rsa加密
const encrypt = (value: string) => {
  try {
    const { pki, util } = forge;
    const publicKeyObj = pki.publicKeyFromPem(pubKey.value);
    const encryptedData = publicKeyObj.encrypt(util.encodeUtf8(value), 'RSA-OAEP');
    return forge.util.encode64(encryptedData);
  } catch(err) {
    return err
  }
}

// 注册或者登录
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
        if (isUiModule.value == 'login') {
            isInvoke.value = true;
            const data = {
              user: encrypt(loginData.user),
              password: encrypt(loginData.password)
            }
            userApi.login(data)
              .then(res => {
                isInvoke.value = false;
                if (res.data.code == 0) {
                  if (isCheck.value) {
                    let rememberData = {
                      username: btoa(loginData.user),
                      password: btoa(loginData.password)
                    }
                    localStorage.setItem('remember',JSON.stringify(rememberData))
                    dialogVisible.value = false;
                  } else {
                    if (localStorage.getItem('remember')) {
                      localStorage.removeItem('remember')
                    }
                  }
                  ElNotification({
                      title: '冒险开始!',
                      message: '欢迎进入未来智匠AI世界，勇敢的冒险者！',
                      type: 'success',
                  })
                  store.setToken(res.data.token)
                  router.push('/mxcontent')
                } else if (res.data.code == 1) {
                    ElMessage({
                        message: '冒险者账号或者邮箱不存在',
                        type: 'warning',
                        offset: 200,
                        plain: true
                    })
                } else if (res.data.code == 2) {
                    ElMessage({
                        message: '冒险者账号或者密令不正确',
                        type: 'warning',
                        offset: 200,
                        plain: true
                    })
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: 'error',
                        offset: 200,
                        plain: true
                    })
                }
              })
        } else if (isUiModule.value == 'register') {
          if (!registerForm.img_url) {
            ElMessage({
                message: '请上传头像',
                type: 'warning',
                offset: 200,
                plain: true
            })
            return
          }
          // if (!registerForm.characterClass) {
          //   ElMessage({
          //       message: '请选择你的职业',
          //       type: 'warning',
          //       offset: 200,
          //       plain: true
          //   })
          //   return
          // }
          // ElMessage({
          //       message: '因大模型用量有限，暂停注册功能，请联系管理员索要专用账号',
          //       type: 'error',
          //       offset: 200,
          //       plain: true
          // })
          // return;
          isInvoke.value = true;
            userApi.register(registerForm)
              .then(res => {
                isInvoke.value = false;
                if (res.data.code == 0) {
                    ElMessage({
                        message: '你已成功拥有冒险账册！',
                        type: 'success',
                        offset: 200,
                        plain: true
                    })
                    isUiModule.value = 'login';
                } else if (res.data.code == 1) {
                    ElMessage({
                        message: '冒险者账号已存在',
                        type: 'warning',
                        offset: 200,
                        plain: true
                    })
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: 'error',
                        offset: 200,
                        plain: true
                    })
                    refreshImg()
                }
              })
        } else if (isUiModule.value = 'newCode') {
          isInvoke.value = true;
          const newData = {
            user: encrypt(changeData.user),
            password: encrypt(changeData.password),
            newPassword: encrypt(changeData.newPassword)
          }
          userApi.changePassword(newData)
            .then(res => {
              isInvoke.value = false;
              if (res.data.code == 0) {
                ElMessage({
                    message: '通行密令修改成功',
                    type: 'success',
                    offset: 200,
                    plain: true
                });
                isUiModule.value = 'login';
              } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                    offset: 200,
                    plain: true
                })
              }
            })
        } else {
          isInvoke.value = true;
          userApi.resetPassword(resetData)
            .then(res => {
              isInvoke.value = false;
              if (res.data.code == 0) {
                ElMessage({
                    message: '通行密令重置成功，请前往邮箱查看',
                    type: 'success',
                    offset: 200,
                    plain: true
                });
                isUiModule.value = 'login';
              } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                    offset: 200,
                    plain: true
                })
              }
            })
        }
    }
  })
}

const switchMode = (module: string) => {
  isUiModule.value = module
  if (isUiModule.value == 'register') {
    refreshImg()
  }
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 验证码生成
const refreshImg = () => {
  userApi.captcha()
    .then(res => {
      if (res.data.code == 0) {
          svgSrc.value = res.data.imgData
      } else {
        ElMessage({
            message: res.data.msg,
            type: 'error',
            offset: 200,
            plain: true
        })
      }
    })
}

const enterAi = () => {
  router.push('/mxcontent')
}

const openDialog = () => {
  let usersData = localStorage.getItem('remember')
  if (usersData) {
    loginData.user = atob(JSON.parse(usersData).username)
    loginData.password = atob(JSON.parse(usersData).password)
    isCheck.value = true
  }
  dialogVisible.value = true
}

// 密码修改或重置
const editCipher = (type: string) => {
  isUiModule.value = type
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

onMounted(() => {
  userApi.publicKey()
    .then(res => {
      pubKey.value = res.data.key
    })
})
</script>

<template>
  <div class="home">
    <div class="character">
      <img src="./images/Serendale.png" alt="">
    </div>
      <div class="middle pt-65 ml-120">
          <h1 class="title">冒险纪元</h1>
          <span class="text">{{ typedText }}</span>
      </div>
      <div class="btn ml-120">
          <div class="btn-default login three-e" @click="openDialog">登录</div>
          <div class="btn-default word three-d" @click="enterAi">开启旅途</div>
      </div>
      <el-dialog
        v-model="dialogVisible"
        :width="isUiModule == 'login' || isUiModule == 'resetPassword' || isUiModule == 'newCode' ? '400px' : '500px'"
        center
        :show-close="false"
        class="adventurer-auth-dialog"
        align-center
      >
        <div class="auth-container">
          <div class="auth-header">
            <div class="header-content">
              <div class="title-decoration">⚜️</div>
              <h2>{{ isUiModule == 'login' ? '冒险者归来' : '开启冒险之旅' }}</h2>
              <p>{{ isUiModule == 'login' ? '欢迎回到这片神奇的大陆' : '准备好开始你的传奇了吗？' }}</p>
            </div>
          </div>
          
          <!-- 登录表单 -->
          <el-form
            v-if="isUiModule == 'login'"
            ref="formRef"
            :model="loginData"
            :rules="loginRules"
            class="auth-form"
            @keyup.enter="handleSubmit(formRef)"
          >
            <el-form-item prop="user">
              <el-input
                v-model="loginData.user"
                :prefix-icon="User"
                placeholder="冒险者账号或邮箱"
              />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="loginData.password"
                :prefix-icon="Lock"
                type="password"
                placeholder="通行密令"
                show-password
              />
            </el-form-item>

            <div class="form-footer">
              <el-checkbox v-model="isCheck">记住我的冒险账册</el-checkbox>
              <div>
                <a class="forgot-link amend" @click="editCipher('newCode')">修改密令！</a>
                <a class="forgot-link" @click="editCipher('resetPassword')">遗失密令？</a>
              </div>
            </div>

            <el-button type="primary" @click="handleSubmit(formRef)" class="submit-button" :loading="isInvoke">
              进入世界
            </el-button>

            <div class="switch-mode">
              初来乍到？<a @click="switchMode('register')" class="switch-link">创建冒险者档案</a>
            </div>
          </el-form>

          <!-- 注册表单 -->
          <el-form
            v-else-if="isUiModule == 'register'"
            ref="formRef"
            :model="registerForm"
            :rules="registerRules"
            class="auth-form"
            @keyup.enter="handleSubmit(formRef)"
          >
            <div class="portrait">
                <div class="avatar">头像</div>
                <div class="avatar-img" @click="selectFile">
                    <el-icon :size="20" color="#000" v-if="!registerForm.img_url"><Plus /></el-icon>
                    <img v-else :src="registerForm.img_url" alt="">
                    <input type="file" ref="fileInput" @change="upImg">
                </div>
            </div>
            <el-form-item prop="name">
              <el-input
                v-model="registerForm.name"
                :prefix-icon="VideoCameraFilled"
                placeholder="为你的冒险者取个名字"
              />
            </el-form-item>

            <el-form-item prop="user">
              <el-input
                v-model="registerForm.user"
                :prefix-icon="User"
                placeholder="为你的冒险者想个账号"
              />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="registerForm.password"
                :prefix-icon="Lock"
                type="password"
                placeholder="设置通行密令"
                show-password
              />
            </el-form-item>

            <el-form-item prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                :prefix-icon="Lock"
                type="password"
                placeholder="确认通行密令"
                show-password
              />
            </el-form-item>

            <el-form-item prop="email">
              <el-input
                v-model="registerForm.email"
                :prefix-icon="Message"
                placeholder="为你的冒险者绑定邮箱"
              />
            </el-form-item>

            <el-form-item prop="captcha" class="custom-form-item">
              <el-input
                style="width:260px;"
                maxlength="6"
                v-model="registerForm.captcha"
                :prefix-icon="Key"
                placeholder="验证码"
              />
              <div class="svg-img" v-html="svgSrc" @click="refreshImg"></div>
            </el-form-item>

            <!-- <div class="character-class-selection">
              <h3>选择你的职业</h3>
              <div class="class-options">
                <div
                  v-for="classOption in characterClasses"
                  :key="classOption.value"
                  class="class-option"
                  :class="{ active: registerForm.characterClass === classOption.value }"
                  @click="registerForm.characterClass = classOption.value"
                >
                  <div class="class-icon">{{ classOption.icon }}</div>
                  <div class="class-info">
                    <h4>{{ classOption.label }}</h4>
                    <p>{{ classOption.desc }}</p>
                  </div>
                </div>
              </div>
            </div> -->

            <el-button type="primary" @click="handleSubmit(formRef)" class="submit-button" :loading="isInvoke">
              开启冒险
            </el-button>

            <div class="switch-mode">
              已有账册？<a @click="switchMode('login')" class="switch-link">返回登录</a>
            </div>
          </el-form>

          <!-- 修改密码表单 -->
          <el-form
            v-if="isUiModule == 'newCode'"
            ref="formRef"
            :model="changeData"
            :rules="changeRules"
            class="auth-form"
            @keyup.enter="handleSubmit(formRef)"
          >
            <el-form-item prop="user">
              <el-input
                v-model="changeData.user"
                :prefix-icon="User"
                placeholder="冒险者账号"
              />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="changeData.password"
                :prefix-icon="Lock"
                type="password"
                placeholder="原通行密令"
                show-password
              />
            </el-form-item>

            <el-form-item prop="newPassword">
              <el-input
                v-model="changeData.newPassword"
                :prefix-icon="Lock"
                type="password"
                placeholder="新通行密令"
                show-password
              />
            </el-form-item>

            <el-button type="primary" @click="handleSubmit(formRef)" class="submit-button mt-15" :loading="isInvoke">
              确认修改
            </el-button>

            <div class="switch-mode">
              <a @click="switchMode('login')" class="switch-link">返回登录</a>
            </div>
          </el-form>

          <!-- 重置密码表单 -->
          <el-form
            v-if="isUiModule == 'resetPassword'"
            ref="formRef"
            :model="resetData"
            :rules="resetRules"
            class="auth-form"
            @keyup.enter="handleSubmit(formRef)"
          >
            <el-form-item prop="user">
              <el-input
                v-model="resetData.user"
                :prefix-icon="User"
                placeholder="冒险者账号"
              />
            </el-form-item>
            
            <el-form-item prop="email">
              <el-input
                v-model="resetData.email"
                :prefix-icon="Message"
                placeholder="邮箱账号"
              />
            </el-form-item>

            <el-button type="primary" @click="handleSubmit(formRef)" class="submit-button mt-15" :loading="isInvoke">
              重置密码
            </el-button>

            <div class="switch-mode">
              <a @click="switchMode('login')" class="switch-link">返回登录</a>
            </div>
          </el-form>
        </div>
      </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.adventurer-auth-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    border: 2px solid #8b7355;
    box-shadow: 0 0 20px rgba(139, 115, 85, 0.3);
    background-image: 
      linear-gradient(45deg, rgba(139, 115, 85, 0.1) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(139, 115, 85, 0.1) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(139, 115, 85, 0.1) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(139, 115, 85, 0.1) 75%);
    background-size: 20px 20px;
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 40px;
  }
}

.auth-container {
  .auth-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    
    .title-decoration {
      font-size: 32px;
      margin-bottom: 16px;
      animation: float 3s ease-in-out infinite;
    }
    
    .header-content {
      position: relative;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #8b7355, transparent);
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #8b7355, transparent);
      }
    }

    h2 {
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 8px;
      color: #d4af37;
      text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
      font-family: 'Noto Sans JP', sans-serif;
    }

    p {
      color: #8b7355;
      margin: 0;
      font-size: 14px;
    }
  }

  .auth-form {
    :deep(.el-input) {
      --el-input-bg-color: rgba(42, 42, 42, 0.8);
      --el-input-border-color: #8b7355;
      --el-input-hover-border-color: #d4af37;
      --el-input-focus-border-color: #d4af37;
      
      .el-input__wrapper {
        border-radius: 8px;
        padding: 8px 16px;
        box-shadow: none !important;
        background: rgba(42, 42, 42, 0.8);
        border: 1px solid #8b7355;
        transition: all 0.3s ease;

        &:hover {
          border-color: #d4af37;
        }

        &.is-focus {
          border-color: #d4af37;
          box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
        }
      }

      .el-input__prefix-icon {
        font-size: 18px;
        color: #8b7355;
      }
    }

    .character-class-selection {
      margin: 20px 0;
      
      h3 {
        color: #d4af37;
        margin-bottom: 16px;
        text-align: center;
        font-size: 18px;
      }

      .class-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        .class-option {
          padding: 12px;
          border: 1px solid #8b7355;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 12px;
          background: rgba(42, 42, 42, 0.8);

          &:hover {
            border-color: #d4af37;
            transform: translateY(-2px);
          }

          &.active {
            border-color: #d4af37;
            background: rgba(212, 175, 55, 0.1);
          }

          .class-icon {
            font-size: 24px;
          }

          .class-info {
            h4 {
              margin: 0 0 4px;
              color: #d4af37;
              font-size: 14px;
            }

            p {
              margin: 0;
              color: #8b7355;
              font-size: 12px;
              line-height: 1.3;
            }
          }
        }
      }
    }

    .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      :deep(.el-checkbox) {
        .el-checkbox__label {
          color: #8b7355;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #d4af37;
          border-color: #d4af37;
        }
      }

      .forgot-link {
        color: #d4af37;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
        &.amend {
          margin-right: 10px;
        }
      }
    }

    .submit-button {
      width: 100%;
      height: 44px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(45deg, #d4af37, #8b7355);
      border: none;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: 0.5s;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);

        &::before {
          left: 100%;
        }
      }

      &:active {
        transform: translateY(0);
      }
      &.mt-15 {
        margin-top: 15px;
      }
    }

    .switch-mode {
      text-align: center;
      margin-top: 16px;
      color: #8b7355;
      font-size: 14px;

      .switch-link {
        color: #d4af37;
        text-decoration: none;
        margin-left: 4px;
        cursor: pointer;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes text-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

// 动画效果
.el-dialog-fade-enter-active {
  animation: dialog-fade-in 0.4s ease-out;
}

.el-dialog-fade-leave-active {
  animation: dialog-fade-out 0.4s ease-in;
}

@keyframes dialog-fade-in {
  0% {
    transform: translate3d(0, -30px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -30px, 0);
    opacity: 0;
  }
}

h1, h2 {
    margin: 0;
}

.home {
    width: 100vw;
    height: 100vh;
    background-color: #769fab;
}

.character {
  position: absolute;
  top: 30%;
  left: 2%;
}

.middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-family: 'myFirstFont';
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    animation: text-float 3s infinite;
    letter-spacing: 20px;
    text-shadow: 5px 5px 5px rgba(255, 251, 0, 0.5);
}

.text {
    background: linear-gradient(90.00deg, #38452b,#4c6d26,#199b0d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-family: Clash Grotesk;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    padding-top: 60px;
    font-family: 'myFirstFont';
}

.text::after{
    font-family: Clash Grotesk;
    display: inline-block;
    opacity: 1;
    content: "";
    background-color: #199b0d;
    width: 13px;
    height: 2px;
    vertical-align: text-bottom;
}

.btn-default {
    width: 160px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 20px;
    opacity: 1;
    transition: all 1s;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
}

.btn {
    display: flex;
    justify-content: center;
    margin-top: 90px;
    font-family: 'myFirstFont';
}

.btn-default.login {
    cursor: pointer;
    letter-spacing: 14px;
    box-sizing: border-box;
    text-indent: 14px;
}

.btn-default.word {
    margin-left: 50px;
    cursor: pointer;
    letter-spacing: 14px;
    box-sizing: border-box;
    text-indent: 14px;
}

.word:hover, .login:hover {
    opacity: 0.6;
}

:deep(.el-input__inner) {
    color: #ccc;
}

.portrait {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.avatar {
  color: #ccc;
}

.avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: 12px;
    background: linear-gradient(45deg, #d4af37, #8b7355);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s;
}

.avatar-img:hover {
    background-color: #b3afaf;
}

.avatar-img input {
    display: none;
}

.avatar-img img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.three-e {
    color: #fff;
    background-color: #49722c;
    text-shadow: -2px 2px 2px #65993f,
                -2px 2px 2px #65993f,
                -2px 2px 2px #65993f,
                -2px 2px 2px #65993f,
                -2px 2px 2px #65993f,
                -2px 2px 2px #65993f;
    box-shadow: 0px 12px 0px 0px #3c5f24;
}

.three-e:hover {
    background-color: #55793d;
    transform: translate(0,4px);
    box-shadow: 0px 1px 0px 0px #3c5f24;
}

.three-d {
    color: #fff;
    background-color: #f1c40f;
    text-shadow: -2px 2px 2px rgb(209 132 0),
                -2px 2px 2px rgb(209 132 0),
                -2px 2px 2px rgb(209 132 0),
                -2px 2px 2px rgb(209 132 0),
                -2px 2px 2px rgb(209 132 0),
                -2px 2px 2px rgb(209 132 0);
    box-shadow: 0px 12px 0px 0px #f39c12;
}

.three-d:hover {
    background-color: #fcdc5e;
    transform: translate(0,4px);
    box-shadow: 0px 1px 0px 0px #f39c12;
}

:deep(.custom-form-item .el-form-item__content) {
  justify-content: space-between;
}

.svg-img {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
<style>
.adventurer-auth-dialog {
    background-color: #1a1a1a;
}

.el-dialog.is-align-center.adventurer-auth-dialog {
    margin-top: 100px;
}
</style>